<template>

<!--图标样式-->
<link rel="stylesheet" type="text/css" href="/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">

<!--布局框架-->
<link rel="stylesheet" type="text/css" href="/assets/css/util.css">

<!--主要样式-->
<link rel="stylesheet" type="text/css" href="/assets/css/main.css">


<div class="limiter">

    <div class="container-login100" style="background-image: url('/assets/images/img-01.jpg');">
        <div class="wrap-login100 p-t-190 p-b-30">
        <!-- 表单 -->
            <van-form @submit="login" class="login100-form validate-form">
            <!-- logo -->
                <div class="login100-form-avatar"  style='margin-bottom:65px;'>
                    <img src="/assets/images/11.jpg" alt="AVATAR">
                </div>

                <!-- 邮箱 -->
                <div class="wrap-input100 validate-input m-b-10">
                    <van-field 
                    v-model="email"
                    label=""
                    name="email"
                    left-icon="envelop-o"
                    placeholder="请登录邮箱"

                    :rules='rules.email'
                    />
                </div>

                <!-- 密码 -->
                <div class="wrap-input100 validate-input m-b-10">
                    <van-field 
                        v-model="password"
                        label=""
                        name="password"
                        left-icon="bag-o"
                        placeholder="请输入密码"
                        type="password"
                        :rules="rules.password"
                    />
                </div>

                <div class="container-login100-form-btn p-t-10">
                    <van-button round block color="#333" native-type="submin" >登录</van-button>
                </div>

                <div class="text-center w-full p-t-25 p-b-230">
                    <a href="index.html#" class="txt1">忘记密码？</a>
                </div>

                <div class="text-center w-full">
                    <router-link class='text1' to="/user/base/register">
                          立即注册
                        <i class="fa fa-long-arrow-right"></i>
                    </router-link>
                </div>
            </van-form>
        </div>
    </div>
</div>

</template>

<script>
    // 引入公共部分组件
    import menus from '@/components/common/menus.vue'
    // 只引入 封装 post 表单提交方法(去掉)
    // import {POST} from "@/services/request"
    export default {
        // 引入组件
        name:"BaseLogin",

        // 定义表单数据
        data()
        {
            return{
                email:'',
                password:'',

                // 校验规则数组对象(设置完之后要返回表单里面运用)
                rules:{

                    // 邮箱的校验规则
                    email:[
                        {
                            required:true,
                            message:'请输入注册邮箱'
                        },
                         {
                        // 验证
                        message:'邮箱输入格式有误',
                        validate(value)
                            {
                                // 正则表达式
                                var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$")

                                //test方法返回true 和 false 
                                return reg.test(value)
                            }

                        }
                    ],
                   
                     // 密码
                    password:[
                        {
                            required:true,
                            message:'请输入密码'
                        }
                    ]
                },
               
            }
        },

         methods:{
            // 定义表单提交的方法(调用接口，方法，先异步再同步)
            async login(form)
            {
                
                // 调用接口
                var result=await this.$api.login(form)
                // console.log(result);
                
                if (result.code==1) {
                    
                    // 登录成功后记录cookie
                    this.$cookies.set('LoginUser',result.data)
                   this.$notify({
                        type:'success',
                        message:result.msg,
                        duration:1000,
                        onClose:()=>{
                            // 当他消失的时候跳转
                            this.$router.push(result.url)
                        }
                   })
                }else
                {
                    // 提示信息
                    this.$notify({
                        message:result.msg,
                        type:'danger'
                    })
                }
              
            }
        }
     
    }
</script>